<template id="shop_cart">
	<div class="shop_cart">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/appointment_coach"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>购物车</p>
				<div class="about_select">
					<div class="about_ing"><router-link to="/shop_del">编辑</router-link></div>
				</div>

			</div>
		</div>
		<!--头部结束-->

		<div class="shop_mode">

			<div class="shop_logo">
				<ul>
					<li>
						<div class="shop_img"><img :src="topUrl" /></div>
						<div class="shop_log" @click="checkAll">
							<img src="../../assets/images/my_order/my_order_15.png" />
							<p>优惠券</p>
						</div>
					</li>

					<li v-for="(item, index) in shop" :key="index">
						<div class="shop_img" @click="radioChecked(index)"><img :src="item.checkedImg" /></div>
						<div class="shop_dl">
							<p>订单编号：{{item.orderNumber}}</p>
							<dl>
								<dt><img :src="item.orderUrl"/></dt>
								<dd>
									<p>教练姓名：{{item.name}}</p>
									<p>预约时间：{{item.time}}</p>
									<div class="shop_data">
										<p>时长：{{item.duration}}</p>
										<p>人数：{{item.personNum}}</p>
									</div>
									<p>课程：{{item.curriculum}}</p>
								</dd>

							</dl>
							<div class="shop_money"><img src="../../assets/images/my_order/my_order_19.png" /><span>{{item.money}}</span></div>
						</div>
					</li>
				</ul>
			</div>

		</div>


    <!--全选/去下单-->
		<div class="shop_checked">
			<div class="shop_checked_left">
				<div class="shop_model" @click="checkAll"><img :src="topUrl" /></div>
				<p>全选</p>
				<div class="shop_pay">合计:<img src="../../assets/images/shop_cart/shop_17.png" /><span>516</span></div>
			</div>
			<div class="shop_checked_right" @click="submit">
				<router-link to="/pay_order">
					去下单
				<span v-if="sumNum">({{sumNum}})</span>
				</router-link>
				
			</div>
		</div>
		
		<!--去下单结束-->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				shop: [],
				topUrl: require('../../assets/images/pay/pay_21.png'),
				topUrlChecked: false,
				sumNum: ''
			}
		},
		created() {
			this.listInfo()
		},
		methods: {
			listInfo() {
				let data = [{
						checkedImg: require('../../assets/images/pay/pay_21.png'),
						orderNumber: 　 '272727272291029383',
						orderUrl: require('../../assets/images/class/about_coach.png'),
						name: '王莹莹',
						time: '2108-09-10 9:30',
						duration: '60分钟',
						personNum: '一人',
						curriculum: '减脂YOGA',
						money: 　 '258',
						checked: 　false
					},
					{
						checkedImg: require('../../assets/images/pay/pay_21.png'),
						orderNumber: 　 '272727272291029383',
						orderUrl: require('../../assets/images/class/about_coach.png'),
						name: '王莹莹',
						time: '2108-09-10 9:30',
						duration: '60分钟',
						personNum: '一人',
						curriculum: '减脂YOGA',
						money: 　 '258',
						checked: 　false
					},
					{
						checkedImg: require('../../assets/images/pay/pay_21.png'),
						orderNumber: 　 '272727272291029383',
						orderUrl: require('../../assets/images/class/about_coach.png'),
						name: '王莹莹',
						time: '2108-09-10 9:30',
						duration: '60分钟',
						personNum: '一人',
						curriculum: '减脂YOGA',
						money: 　 '258',
						checked: 　false
					},
					{
						checkedImg: require('../../assets/images/pay/pay_21.png'),
						orderNumber: 　 '272727272291029383',
						orderUrl: require('../../assets/images/class/about_coach.png'),
						name: '王莹莹',
						time: '2108-09-10 9:30',
						duration: '60分钟',
						personNum: '一人',
						curriculum: '减脂YOGA',
						money: 　 '258',
						checked: 　false
					},
					{
						checkedImg: require('../../assets/images/pay/pay_21.png'),
						orderNumber: 　 '272727272291029383',
						orderUrl: require('../../assets/images/class/about_coach.png'),
						name: '王莹莹',
						time: '2108-09-10 9:30',
						duration: '60分钟',
						personNum: '一人',
						curriculum: '减脂YOGA',
						money: 　 '258',
						checked: 　false
					}
				];
				this.shop = data;
			},
			checkAll() {
				this.topUrlChecked = !this.topUrlChecked;
				if(this.topUrlChecked) {
					this.topUrl = require('../../assets/images/pay/pay_14.png');
					for(let i = 0; i < this.shop.length; i++) {
						//this.$set(this.shop[i], 'isShow', false);
						//Object.assign(this.shop[i], {isShow: false})
						this.shop[i].checkedImg = require('../../assets/images/pay/pay_14.png');
						this.shop[i].checked = true;
					}
					this.sumNum = this.shop.length;
				} else {
					this.topUrl = require('../../assets/images/pay/pay_21.png');
					for(let i = 0; i < this.shop.length; i++) {
						this.shop[i].checkedImg = require('../../assets/images/pay/pay_21.png');
						this.shop[i].checked = false;
					}
					this.sumNum = '';
				}
			},
			radioChecked(index) {
				let arr = [];
				for(let i = 0; i < this.shop.length; i++) {
					if(index === i) {
						this.shop[i].checked = !this.shop[i].checked;
						this.shop[i].checkedImg = this.shop[i].checkedImg === require('../../assets/images/pay/pay_21.png') ? require('../../assets/images/pay/pay_14.png') : require('../../assets/images/pay/pay_21.png');
					}

					// 是否全选
					if(this.shop[i].checked) {
						arr.push(true);
					}
					if(arr.length === this.shop.length) {
						this.topUrl = require('../../assets/images/pay/pay_14.png');
					} else {
						this.topUrl = require('../../assets/images/pay/pay_21.png');
					}
				}
				this.sumNum = arr.length;
			},

			submit() {
				let orderNumberArr = [];
				for(let i = 0; i < this.shop.length; i++) {
					if(this.shop[i].checked) {
						orderNumberArr.push(this.shop[i].orderNumber);
					}
				}
				console.log(orderNumberArr);
			}
		}
	}
</script>

<style scoped>
	@import "../../assets/css/shop_cart.css";
</style>